<template>
  <div>
    <div class="header">
      <div class="header-left">
        <div
          class="navbar-item"
          v-for="(item,index) in sortList"
          :key="index"
          :class="{isRed:selected===item.id}"
          @click="redChange(item)"
        >
          <p class="item-con">{{item.value}}</p>
        </div>
      </div>
      <div class="right-img" @click="popupShow">
        <img src="../../assets/img/static/imgs/up.png" v-show="popupVisible"/>
        <img src="../../assets/img/static/imgs/down.png"  v-show="!popupVisible" />
      </div>
    </div>
    <div class="container">
      <mt-tab-container v-model="selected">
        <mt-tab-container-item id="01">
          <div
            class="nv-news-item"
            v-for="(item,index2) in sortList[0].newsArr"
            :key="index2"
            @click="navtoDetails(item.url)"
          >
            <div class="nv-news-info">
              <div class="nv-news-tit">{{item.title}}</div>
              <div class="nv-news-tipper">
                <div class="nv-news-tip-col">{{item.pubdate}}</div>
              </div>
            </div>
            <div class="con-item-pic">
              <img :src=item.image :onerror="noImg" />
            </div>
          </div>
        </mt-tab-container-item>
        <mt-tab-container-item id="03">
          <div class="nv-news-item" v-for="(item,index3) in sortList[1].newsArr" :key="index3"  @click="navtoDetails(item.url)">
            <div class="nv-news-info">
              <div class="nv-news-tit">{{item.title}}</div>
              <div class="nv-news-tipper">
                <div class="nv-news-tip-col">{{item.pubdate}}</div>
              </div>
            </div>
            <div class="con-item-pic">
              <img :src=item.image :onerror="noImg" />
            </div>
          </div>
        </mt-tab-container-item>
        <mt-tab-container-item id="50">
          <div class="nv-news-item"  @click="navtoDetails(item.url)" v-for="(item,index4) in sortList[2].newsArr" :key="index4">
            <div class="nv-news-info">
              <div class="nv-news-tit">{{item.title}}</div>
              <div class="nv-news-tipper">
                <div class="nv-news-tip-col">{{item.pubdate}}</div>
                <!-- <div class="nv-news-circle"></div>
                <div class="nv-news-tip-col">{{item.num}}阅读</div> -->
              </div>
            </div>
            <div class="con-item-pic">
              <img :src=item.image :onerror="noImg" />
            </div>
          </div>
        </mt-tab-container-item>
        <mt-tab-container-item id="53">
          <div class="nv-news-item"  @click="navtoDetails(item.url)" v-for="(item,index5) in sortList[3].newsArr" :key="index5">
            <div class="nv-news-info">
              <div class="nv-news-tit">{{item.title}}</div>
              <div class="nv-news-tipper">
                <div class="nv-news-tip-col">{{item.pubdate}}</div>
              </div>
            </div>
            <div class="con-item-pic">
              <img :src=item.image :onerror="noImg" />
            </div>
          </div>
        </mt-tab-container-item>
        <mt-tab-container-item id="52">
          <div class="nv-news-item"  @click="navtoDetails(item.url)" v-for="(item,index6) in sortList[4].newsArr" :key="index6">
            <div class="nv-news-info">
              <div class="nv-news-tit">{{item.title}}</div>
              <div class="nv-news-tipper">
                <div class="nv-news-tip-col">{{item.pubdate}}</div>
              </div>
            </div>
            <div class="con-item-pic">
              <img :src=item.image :onerror="noImg" />
            </div>
          </div>
        </mt-tab-container-item>
        <mt-tab-container-item id="51">
          <div class="nv-news-item"  @click="navtoDetails(item.url)" v-for="(item,index7) in sortList[5].newsArr" :key="index7">
            <div class="nv-news-info">
              <div class="nv-news-tit">{{item.title}}</div>
              <div class="nv-news-tipper">
                <div class="nv-news-tip-col">{{item.pubdate}}</div>
              </div>
            </div>
            <div class="con-item-pic">
              <img :src=item.image :onerror="noImg" />
            </div>
          </div>
        </mt-tab-container-item>
        <mt-tab-container-item id="07">
          <div class="nv-news-item"  @click="navtoDetails(item.url)" v-for="(item,index8) in sortList[6].newsArr" :key="index8">
            <div class="nv-news-info">
             <div class="nv-news-tit">{{item.title}}</div>
              <div class="nv-news-tipper">
                <div class="nv-news-tip-col">{{item.pubdate}}</div>
              </div>
            </div>
            <div class="con-item-pic">
              <img :src=item.image :onerror="noImg" />
            </div>
          </div>
        </mt-tab-container-item>
       
      </mt-tab-container>
    </div>
    <div class="popup" v-show="popupVisible">
      <div class="popup-con">
        <div class="nav-more-tit">
          <p>全部频道</p>
        </div>
        <div class="nav-more-listbox">
          <div class="nav-more-list">
            <div
              class="nav-m-col"
              v-for="(item,index) in sortList"
              :key="index"
              :class="{navactive:selected===item.id}"
              @click="redChange2(item)"
            ><span>{{item.value}}</span></div>
          </div>
        </div>
      </div>
      <div class="popup-bj" @click="cancelPopup"></div>
    </div>
  </div>
</template>
<script>
import carousel from './components/carousel'
import { Swipe, SwipeItem, Cell, CellSwipe } from "mint-ui";
import { TabContainer, TabContainerItem} from "mint-ui";
import { aopencode} from '@/request/zxapi'
export default {
  name: "explain",
  components: {
    mtSwipe: Swipe,
    mtSwipeItem: SwipeItem,
    mtCell: Cell,
    mtTabContainer: TabContainer,
    mtTabContainerItem: TabContainerItem,
    mtCellSwipe: CellSwipe,
    carousel
  },
  data: function() {
    return {
      notice:[ "黑人强专家推荐2020009期双色球喜中一等奖！",
          "稳定红利专家推荐2020009期双色球喜中一等奖！",
          "买彩票专家推荐2020009期双色球喜中一等奖！",
          '缘来有你不专家推荐2020009期双色球喜中一等奖！'],
      bannerList:['./static/imgs/banner_zs.jpg','./static/imgs/banner_zs.jpg'],
      popupVisible: false,
      noImg:'this.src = "./static/imgs/errorimg.jpg"',
      num: 1,
      selected: "01",
      sortList: [
        {
          rname:'ssq',
          id: "01",
          value: "双色球",
          newsArr:[]
        },
        {
          rname:'3d',
          id: "03",
          value: "福彩3D",
          newsArr:[]
        },
        {
          rname:'dlt',
          id: "50",
          value: "大乐透",
          newsArr:[]
        },
        {
          rname:'p3',
          id: "53",
          value: "排列3",
          newsArr:[]
        },
        {
          rname:'p5',
          id: "52",
          value: "排列5",
          newsArr:[]
        },
        {
          rname:'qxc',
          id: "51",
          value: "七星彩",
          newsArr:[]
        },
        {
          rname:'qlc',
          id: "07",
          value: "七乐彩",
          newsArr:[]
        },
      ]
    };
  },
  methods: {
    redChange(item) {
      this.selected = item.id;
      if(item.newsArr.length==0){
        this.getData();
      }

    },
    redChange2(item) {
      this.selected = item.id;
      if(item.newsArr.length==0){
        this.getData();
      }
      this.popupVisible=!this.popupVisible;
    },
   
    popupShow() {
      this.popupVisible = !this.popupVisible;
    },
    //跳到详情页
    navtoDetails(url) {
      // window.location.href ='http://m.178ty.com'+url;
      this.$router.push({
          name: 'newsDetail',
          params: {
            url: url
          }
        })
    },
    cancelPopup(){
      this.popupVisible=!this.popupVisible;
    },
    // 加载更多
    loadMore() {
     
    },
    getData(){
      let t = this;
      let selected=this.selected;
      let index=this.sortList.findIndex(value => {return value.id==selected});
      let rname=this.sortList[index].rname;
       aopencode(rname).then(res => {
            res.forEach(function(item,index){
                item.image=t.keyUrl2+item.image;
            })
           this.sortList[index].newsArr=res;
        }).catch(err =>{
            console.log(err)
        })
    }
  },
  created() {
    this.selected=this.$route.params.id;
    this.getData();
  }
};
</script>
<style lang="less" scoped>
img {
  width: 100%;
  height: 100%;
}
.header{
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10;
  width: 100%;
  height: 0.44rem;
  line-height: 0.44rem;
  background: #fff;
  display: flex;
  justify-content: space-around;
  .right-img {
    width: 0.4rem;
    height: 0.44rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    img {
      width: 0.16rem;
      height: 0.16rem;
    }
  }
}
.header:before{
  position: absolute;
  z-index: 2;
  content: "";
  width: 100%;
  height: 1px;
  bottom: 0;
  left: 0;
  border-bottom: 1px solid #d8d8d8;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
}

.header-left{
  display: flex;
  width: 3.35rem;
  overflow: auto hidden;
  height: 0.44rem;
  line-height: 0.44rem;
  font-size: 0.14rem;
  font-weight: bold;
  .navbar-item {
    height: 0.44rem;
    display: flex;
    align-items: center;
    justify-content: center;
    .item-con {
      width: 0.85rem;
      height: 0.2rem;
      text-align: center;
      line-height: 0.2rem;
      font-size: 0.14rem;
      font-weight: bold;
      word-break: keep-all;
      white-space: nowrap;
      overflow: hidden;
      border-right: 1px solid #e1dede;
    }
  }
  // .navbar-item:after{
  //   content:"";
  //   width: 1px;
  //     height: 0.14rem;
  //     background: #000;
  //     position: absolute;
  //     right: 0px;
  // }
}
.isRed {
  color: rgb(248, 72, 72);
  font-size: 0.15rem;
  font-weight: bold;
}
.container {
  background: #fff;
  margin-top: 0.44rem;
  .banner-operation{
    position: relative;
    width: 3.75rem;
    height: 1.2rem;
    overflow: hidden;
    z-index: 2;
    .banner-img{
      width: 100%;
      height: 100%;
      
    }
  }
  .horn-bar{
    padding: .12rem .38rem 0 .16rem;
    height: .3rem;
  }

}
// 资讯列表
.nv-news-item {
  position: relative;
  // width: 3.75rem;
  padding: 0.14rem 0.16rem;
  display: flex;
  justify-content: space-around;
  line-height: 1.5;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #e4e4e4;
  background-color: #fff;
  box-sizing: border-box;
  height: 1rem;
  .nv-news-info {
    flex: 1;
    word-wrap: break-word;
    word-break: break-all;
    .nv-news-tit {
      width: 2.43rem;
      height: 0.48rem;
      font-size: 0.18rem;
      color: #3a3a3a;
      margin-bottom: 0.06rem;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
    }
    .nv-news-tipper {
      display: flex;
      flex-direction: row !important;
      align-items: center !important;
      .nv-news-tip-col {
        flex-shrink: 0;
        color: #999;
        font-size: 0.11rem;
      }
      .nv-news-circle {
        width: 0.02rem;
        height: 0.02rem;
        border-radius: 50%;
        background-color: #d8d8d8;
        margin: 0 0.07rem;
      }
    }
  }
  .nv-news-pic {
    width: 0.96rem;
    height: 0.72rem;
    border-radius: 0.02rem;
    overflow: hidden;
    flex-shrink: 0;
    margin-left: 0.12rem;
  }
}
.popup {
  z-index: 999;
  position: fixed;
  top: 0.44rem;
  left: 0;
  width: 100%;
  height: calc(100% - 0.44rem);
  .popup-con {
    width: 100%;
    max-height: 3.4rem;
    overflow-y: auto;
    z-index: 22;
    background-color: #fff;
    .nav-more-tit {
      padding-top: .25rem;
      padding-left: .16rem;
      padding-right: .15rem;
      padding-bottom: 0px;
      font-size: .15rem;
      color: #333;
    }
    .nav-more-listbox {
      display: flex;
      flex-direction: column;
      padding-top: .25rem;
      padding-left: .12rem;
      padding-right: .11rem;
      padding-bottom: .1rem;
      .nav-more-list{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin-bottom: .12rem;
        .nav-m-col{
          width: .8rem;
          height: .32rem;
          line-height: .32rem;
          color: #3a3a3a;
          font-size: .13rem;
          text-align: center;
          margin-left: .04rem;
          margin-right: .04rem;
          margin-bottom: .08rem;
          background-color: #f2f2f6;
          border-radius: .16rem;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
        .navactive{
          color: #f84948;
          background-color: #fff;
          border-width: 0.5px;
          border-style: solid;
          border-color: #f84948;
          box-sizing: border-box;
        }
      }
    }
  }
  .popup-bj {
    width: 100%;
    height: 100%;
    z-index: 10;
    background-color: rgba(0,0,0,.6);
  }
}
</style>
